import React from "react";

class App extends React.Component {
  /**
   * 方式一：在构造函数中定义
   *    PS: 定义之前必须调用 super() 调用父类的构造函数，否则没有this
   *
   * super() 与 super(props) 的区别：
   *    在构造函数内，this.props 有没有内容的问题
   *    super()       this.props 为 undefined
   *    super(props)  this.props 为 传入进入的 props
   */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  constructor(props: any) {
    super(props);
    console.log(props, "props");
    console.log(this.props, "this.props");
    this.state = {
      num: 10,
      age: 18,
    };
  }

  /**
   * 方式二：通过 Public class fields 语法【推荐】
   */
  // state = {
  //   num: 1,
  //   age: 18,
  // };

  render() {
    console.log("this", this);
    return (
      <div>
        <h1>App</h1>
        {/* 使用 state this.state.xxx */}
        <button>{this.state.num}</button>
      </div>
    );
  }
}

export default App;
